.editor-visibility {
	display: flex;
	font-size: 13px;
	justify-content: space-between;
	align-items: center;
	margin: 8px 0;
}

.editor-visibility__dropdown {
	text-align: left;
	width: 100%;

	.select-dropdown,
	.select-dropdown__container {
		max-width: 100%;
		width: 100%;
	}

	.select-dropdown__header {
		max-width: ( $sidebar-width-max - $accordion-padding * 2 );

		@include breakpoint( '<660px' ) {
			max-width: 100%;
			min-width: ( $sidebar-width-max - $accordion-padding * 2 );
		}
	}

	.form-text-input {
		font-size: 13px;
		margin-top: 8px;
	}

	.form-input-validation {
		padding-bottom: 0;
	}

	.form-setting-explanation {
		margin: -4px 0 8px 24px;

		&.password {
			margin-bottom: 0;
		}
	}

	.gridicons-globe {
		color: var( --color-success );
	}

	.gridicons-user {
		color: var( --color-warning );
	}

	.gridicons-lock {
		color: var( --color-error );
	}

	.gridicon.is_active {
		color: var( --color-neutral-70 );

		&:hover {
			color: var( --color-neutral-10 );
		}
	}

	.is-selected .gridicon {
		color: #fff;
	}
}

.editor-visibility .button {
	&.is-touch,
	&:hover {
		.editor-visibility__label {
			color: var( --color-neutral-40 );
		}
	}

	.gridicon {
		margin-right: 4px;
	}
}

.editor-visibility__dialog {
	text-align: left;
	width: 180px;
	padding: 20px;

	.form-text-input {
		font-size: 13px;
	}

	.form-input-validation {
		padding-bottom: 0;
	}

	.form-setting-explanation {
		margin: -4px 0 8px 24px;

		&.password {
			margin-bottom: 0;
		}
	}

	.gridicon {
		cursor: pointer;
		vertical-align: bottom;
		margin-left: 4px;
		color: var( --color-neutral-10 );

		&:hover {
			color: var( --color-neutral-70 );
		}
	}

	.gridicon.is_active {
		color: var( --color-neutral-70 );

		&:hover {
			color: var( --color-neutral-10 );
		}
	}
}

.editor-visibility__tooltip .popover__inner {
	white-space: nowrap;
}

.popover {
	&.editor-visibility__popover {
		/* applying a lower z-index to ensure it is layered behind the masterbar */
		z-index: z-index( 'root', '.popover.editor-visibility__popover' );
	}
}
